<template>
	<div class="container">
		<div style="position:absolute; right: 20px;">
			<a-button style="margin-left: 10px;" @click="printElement('purchase-info-page')">打印/导出PDF</a-button>
			<a-button style="margin-left: 10px;" @click="closeTab('/purchase')">
				<close-outlined />关闭
			</a-button>
		</div>
		<div id="purchase-info-page">
			<!--			<h2 style="text-align:center;margin-bottom: 12px;">预约申请单</h2>-->
			<a-form>
				<a-descriptions size="middle" title="预约申请单" bordered>
					<a-descriptions-item label="项目名称" :span="2">{{ info.project?.name }}</a-descriptions-item>
					<a-descriptions-item label="预约申请单号">{{ info.code }}</a-descriptions-item>
					<a-descriptions-item label="接收联系人">{{ info.receiver || userlist.find(item => item.value === info.receiver_id)?.label }}</a-descriptions-item>
					<a-descriptions-item label="联系人电话">{{ info.receiver_tel }}</a-descriptions-item>
					<a-descriptions-item label="送达日期">{{ info.deliver_time }}</a-descriptions-item>
					<a-descriptions-item label="送达地址">{{ info.deliver_address }}</a-descriptions-item>
				</a-descriptions>
				<a-row :gutter="20">
					<a-col :span="24">
						<h3 style="margin: 10px 0;">本次采购物资清单</h3>
						<a-table v-if="type==1" :data-source="info.materials" :columns="planMaterialColumns" :scroll="tableScroll" :row-key="(record) => record.key" :pagination="false"></a-table>
					</a-col>
					<a-col :span="24">
						<a-form-item label="备注" name="memo">{{ info.memo }}</a-form-item>
					</a-col>
				</a-row>
			</a-form>

			<!--
			<h2 style="margin-bottom: 12px;">计划的发起申请人</h2>
			-->
			<a-workflow v-if="info.id" v-model:status="info.workflow_status" module="purchase" :target-id="info.id" :project-id="info.project_id" :code="info.code" :user-id="info.purchaser_id" :extra="true" :steps="true" @submit="(e) => console.log(e)"></a-workflow>
		</div>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-button @click="closeTab('/purchase')">
					<close-outlined />关闭
				</a-button>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { AWorkflow } from "@/components";

//import { baseURL } from "../utils/request";
//import dayjs from "dayjs";
import { post, listToTree, postJson } from "../utils";
import { useRoute } from "vue-router";
import { add, subtract } from "../utils/operation.js";
import { printElement } from "../utils/exportData.js";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
const isPrint = JSON.parse(route.query.print || "false");
import dayjs from "dayjs";
import { CloseOutlined } from "@ant-design/icons-vue";
const type = ref("1");
const planMaterialColumns = [
	{
		title: "ID",
		dataIndex: "id",
		width: 60,
		align: "center"
	},
	{
		title: "物资名称",
		dataIndex: "name",
		width: 200,
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: "model",
		width: 150,
		ellipsis: true
	},
	{
		title: "单位",
		dataIndex: "unit",
		width: 130,
		align: "center"
	},
	{
		title: "数量",
		dataIndex: "quantity",
		width: 100,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			if (parseInt(text) === parseFloat(text)) {
				return parseInt(text);
			} else {
				return text;
			}
		}
	},
	{
		title: "合同余量",
		dataIndex: "pendingQuantity",
		width: 100,
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		width: 200,
		align: "center"
	}
];
const userlist = ref([]); // 供应商列表

const info = ref({});
onMounted(() => {
	post("purchase/info", { id: id.value }).then(async data => {
		data.deliver_time = data.deliver_time ? dayjs(data.deliver_time).format("YYYY-MM-DD HH:mm:ss") : "";
		const contractMaterialInfos = await postJson(`contract/apply`, {
			project_id: data.project_id, 
			types: [1, 2], 
			material_types: [1, 3],
		});
		const contractMaterialInfos2MaterialId = contractMaterialInfos.reduce((target, item) => {
			for (const material of item.materials) {
				if (!target[material.id]) {
					target[material.id] = 0;
				}
				target[material.id] = add([target[material.id], material.ContractMaterial?.pending_quantity || 0]);
			}
			return target;
		}, {});
		data.materials = data.materials.map(item => {
			const { quantity, unit, memo } = item.PurchaseMaterial;
			const pendingQuantity = contractMaterialInfos2MaterialId[item.id];
			return {
				...item,
				quantity,
				unit,
				memo,
				pendingQuantity
			};
		});
		info.value = data;
		post("project/user", { project_id: data.project_id, scene: "main", status: "1" }).then(data => {
			userlist.value = data.map(d => ({
				label: d.fullname || d.username,
				value: d.id,
				mobile: d.mobile
			}));
		});
	});
});
const tableScroll = computed(() => (!isPrint ? { y: Math.min(50 * 10, 50 * info.value.materials?.length) } : {}));

const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 20px;
}
:deep(.ant-descriptions-title) {
	text-align: center;
}
</style>
